<template>
  <div>
    <div class="bg-white p-4">
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <div
            class="w-20 h-20 rounded-full bg-gray-200 text-center leading-[5rem]"
          >
            <van-icon
              name="user"
              class="text-white"
              style="font-size: 2.5rem"
            ></van-icon>
          </div>
          <div class="ml-2">
            <p class="text-gray-600 font-medium mb-2">用户名</p>
            <p class="text-gray-500">13541313522</p>
          </div>
        </div>
      </div>
    </div>
    <van-cell-group>
      <van-cell title="地址管理" is-link @click="goToAddress" />
      <van-cell title="修改密码" is-link @click="goToChangePassword" />
      <van-cell @click="logout" title="退出登录" />
    </van-cell-group>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { useUserStore } from "@/store/modules/user";
import { useRouter } from "vue-router";
import { showConfirmDialog } from "vant";

const { getUserInfo, loginOut } = useUserStore();
const router = useRouter();

const goToAddress = () => router.push("/mine/address");
const goToChangePassword = () => {};
const logout = async () => {
  await showConfirmDialog({
    title: "提示",
    message: "是否确认退出登录？",
  });
  await loginOut();
  router.replace("/login");
};
</script>
